<template>
  <view class="goods-wrap">
    <scroll-view scroll-y class="goods-detail">
      <!-- 轮播 -->
      <swiper
        class="detail-swiper"
        indicator-dots
        autoplay
        circular
      >
        <swiper-item
          class="swiper-item"
          v-for="(item, index) in detailData.swipers"
          :key="index"
        >
          <image 
            :src="item.pics_mid_url" 
            mode="widthFix"
            @click="handleToPieview(item.pics_mid_url)"
          />
        </swiper-item>
      </swiper>
      <!-- /轮播 -->
      <!-- 商品信息 -->
      <view class="goods-info">
        <view class="goods-price">¥{{ detailData.price }}</view>
        <view class="goods-name-row">
          <view class="goods-name">{{ detailData.name }}</view>
          <view class="goods-collect">
            <text class="iconfont icon-shoucang-copy"></text>
            <view class="goods-text">收藏</view>
          </view>
        </view>
      </view>
      <!-- /商品信息 -->
      <!-- 图文详情 -->
      <view class="goods-info">
        <view class="goods-info-title">图文详情</view>
        <view class="goods-info-content">
          <rich-text :nodes="detailData.introduce"></rich-text>
        </view>
      </view>
      <!-- /图文详情 -->
    </scroll-view>
    <view class="goods-nav-bar">
      <uni-goods-nav 
        :fill="true"  
        :options="options" 
        :buttonGroup="buttonGroup"  
        @click="onClick" 
        @buttonClick="buttonClick" 
      />
    </view>
  </view>
</template>

<script>
  import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
  import { goodsDetail } from '@/utils/request.js'
  export default {
    data() {
      return {
        detailData: {
          swipers: [], // 轮播图数组
          price: '', // 价格
          name: '', // 名字
          introduce: '', // 富文本
        },
        options: [
          {
            icon: 'headphones',
            text: '客服'
          },
          {
            icon: 'shop',
            text: '店铺',
            info: 2,
            infoBackgroundColor:'#007aff',
            infoColor:"red"
          },
          {
            icon: 'cart',
            text: '购物车',
            info: 2
          },
        ],
        buttonGroup: [
          {
            text: '加入购物车',
            backgroundColor: '#ff0000',
            color: '#fff'
          },
          {
            text: '立即购买',
            backgroundColor: '#ffa200',
            color: '#fff'
          }
        ]
      }
    },
    components: {
      uniGoodsNav
    },
    onLoad (options) {
      this.loadData(options.id)
    },
    methods: {
      loadData (id) {
        goodsDetail(id).then(res => {
          if (res.statusCode === 200) {
            this.detailData.swipers = res.data.message.pics
            this.detailData.price = res.data.message.goods_price
            this.detailData.name = res.data.message.goods_name
            this.detailData.introduce = res.data.message.goods_introduce
          }
        }) 
      },
      
      // 预览图片
      handleToPieview (current) {
        const urls = this.detailData.swipers.map(v => v.pics_big)
        uni.previewImage({
          current,
          urls
        })
      },
      
      onClick (e) {
        uni.showToast({
          title: `点击${e.content.text}`,
          icon: 'none'
        })
      },
      buttonClick (e) {
        console.log(e)
        this.options[2].info++
        if (e.index == 0) {
          uni.showToast({
            title: `添加成功`,
            icon: 'success'
          })
        } else if (e.index == 1) {
          uni.showToast({
            title: `别点啦~点爆啦`,
            icon: 'error'
          })
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  // 轮播图
  .detail-swiper {
    height: 65vw;
    text-align: center;
    .swiper-item {
      image {
        width: 60%;
      }
    }
  }
  // 描述
  .goods-info {
    .goods-price {
      padding: 15rpx;
      color: #eb4450;
      font-size: 32rpx;
      font-weight: 600;
    }
    .goods-name-row {
      display: flex;
      .goods-name {
        flex: 5;
        color: #000;
        font-size: 30rpx;
        padding: 0 10rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .goods-collect {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // text-align: center;
        border-left: 1px solid #dedede;
      }
    }
  }
  // 图文详情
  .goods-info {
    .goods-info-title {
      font-size: 32rpx;
      color: #eb4450;
      padding: 20rpx;
      font-weight: 600;
    }
  }
  .goods-nav-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
  }
</style>
